<!-- 招商加盟信息 -->
<template>
  <div class="table">
    <el-tabs v-model="activeName" @tab-click="handleChangeTabs">
      <el-tab-pane label="招商加盟列表" name="one">
        <SearchTable @handleAdd="handleAdd" @handleViewEdit="handleViewEdit" />
      </el-tab-pane>
      <el-tab-pane label="招商加盟详情" name="two">
        <FormTab v-model:formStatus="formStatus" v-model:form="form" @handleInitData="clearData" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="inviteInvestmentJoinInfo">
import SearchTable from "@/components/inviteInvestmentJoinInfo/SearchTable.vue";
import FormTab from "@/components/inviteInvestmentJoinInfo/FormTab.vue";
import type { TabsMode, ViewMode, ViewModeFilter } from "@/types/common";
import type { TabsPaneContext } from "element-plus";
import type { IInvestmentRecord } from "@/types/investmentRecord";

/* 表格状态 */
const formStatus = ref<ViewMode>("none");

/* 标签页切换 */
const activeName = ref<TabsMode>("one");
const form = reactive<IInvestmentRecord>({
  id: 0,
  city: "",
  create_time: 0,
  is_contact: 0,
  mobile: "",
  mode: "",
  name: "",
  platform_remark: "",
  remark: ""
});
/* 处理切换标签页 */
function handleChangeTabs(tab: TabsPaneContext) {
  if (tab.props.name === "two") {
    formStatus.value = "edit";
  } else if (tab.props.name === "one") {
    clearData();
  }
}

/* 清除数据 */
function clearData() {
  activeName.value = "one";
  formStatus.value = "none";
  form.id = 0;
  form.city = "";
  form.create_time = 0;
  form.is_contact = 0;
  form.mobile = "";
  form.mode = "";
  form.name = "";
  form.platform_remark = "";
  form.remark = "";
}
/* 点击添加按钮 */
function handleAdd(code: ViewMode) {
  formStatus.value = code;
  activeName.value = "two";
}
/* 点击编辑按钮 */
function handleViewEdit(row: IInvestmentRecord, code: ViewModeFilter) {
  formStatus.value = code;
  activeName.value = "two";
  /* nextTick 解决重置该表单项 初始化的数据问题 */
  nextTick(() => {
    form.id = row.id;
    form.city = row.city;
    form.create_time = row.create_time;
    form.is_contact = row.is_contact;
    form.mobile = row.mobile;
    form.mode = row.mode;
    form.name = row.name;
    form.platform_remark = row.platform_remark;
    form.remark = row.remark;
  });
}
</script>

<style lang="scss" scoped></style>
